<template>
  <div class="cate-container">
    <el-card>
      <Bread first="文章管理" second="文章列表"></Bread>
      <div class="cate-header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="活动区域">
            <!-- label是用来显示值的  value是用来获取值的 -->
            <el-select v-model="obj.cate_id" placeholder="活动区域">
              <el-option
                :label="item.cate_name"
                :value="item.id"
                v-for="item in artList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动区域2">
            <el-select v-model="obj.state" placeholder="活//动区域">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="resAt">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" @click="dialogVisible = true"
          >发表文章</el-button
        >
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="文章标题" width="180">
          <template slot-scope="{ row }">
            <el-link type="primary" @click="showDetail(row.id)">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column label="发布时间">
          <template slot-scope="{ row }">
            {{ row.pub_date | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="obj.pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="obj.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 文章详情的对话框 -->
    <el-dialog title="文章预览" :visible.sync="infoVisible" width="80%">
      <!-- 展示数据 -->
      <artInfo :articleInfo="infoData"></artInfo>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 发表文章的对话框 -->
    <el-dialog
      title="发表文章"
      :visible.sync="dialogVisible"
      destroy-on-close
      fullscreen
    >
      <p>发表文章内容结构</p>
      <artPub @closeBtn="closeBtn1"></artPub>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import artInfo from './componets/ArtInfo.vue'
import artPub from './componets/Artpub.vue'
import { getListApi, removeApi, getArtInfoApi } from '../../api/art.js'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      list: [],
      infoData: {},
      obj: {
        pagenum: 1,
        pagesize: 1,
        cate_id: '',
        state: ''
      },
      total: 0,
      infoVisible: false,
      dialogVisible: false
    }
  },
  components: {
    artInfo,
    artPub
  },
  methods: {
    onSubmit () {
      this.getList()
    },
    resAt () {
      this.obj.cate_id = ''
      this.obj.state = ''
    },
    async getList () {
      const res = await getListApi(this.obj)
      this.list = res.data.data
      this.total = res.data.total
    },
    handleDelete (row) {
      this.$confirm('此操作将永久删除,是否继续', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeApi(row.id)
        // console.log(res)
        if (res.data.code === 0) {
          this.$message({
            message: '恭喜删除成功',
            type: 'success'
          })
          // 添加成功后重新渲染页面
          this.getList()
        }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.obj.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.obj.pagenum = val
      this.getList()
    },
    async showDetail (id) {
      this.infoVisible = true
      const res = await getArtInfoApi(id)
      console.log(res.data.data)
      this.infoData = res.data.data
    },
    closeBtn1 () {
      this.dialogVisible = false
      this.getList()
    }
  },
  created () {
    this.getList()
  },
  computed: {
    ...mapState('articel', ['artList'])
  }
}
</script>

<style  lang='less'  scoped>
.cate-container {
  .cate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
}
</style>
